การควบคุม CSS ขั้นสูง: การลงทะเบียน Custom Property ด้วย @property

Custom properties (หรือที่เรียกว่าตัวแปร CSS) ได้ปฏิวัติวิธีการเขียนและบำรุงรักษา CSS ของเรา ช่วยให้เรากำหนดค่าที่นำกลับมาใช้ใหม่ได้ ทำให้สไตล์ชีตของเรามีความยืดหยุ่นและบำรุงรักษาง่ายยิ่งขึ้น แต่ถ้าคุณสามารถทำได้มากกว่าแค่การกำหนดค่าล่ะ? จะเกิดอะไรขึ้นถ้าคุณสามารถกำหนดประเภทของค่าที่ Custom property ถือไว้ พร้อมกับค่าเริ่มต้นและลักษณะการสืบทอด นั่นคือสิ่งที่ @property เข้ามามีบทบาท

@property คืออะไร

@property เป็น CSS at-rule ที่ช่วยให้คุณลงทะเบียน Custom property กับเบราว์เซอร์ได้อย่างชัดเจน กระบวนการลงทะเบียนนี้ให้ข้อมูลแก่เบราว์เซอร์เกี่ยวกับประเภทที่คาดหวังของ Property ค่าเริ่มต้น และควรถ่ายทอดจากองค์ประกอบหลักหรือไม่ สิ่งนี้จะปลดล็อกความสามารถขั้นสูงหลายอย่าง รวมถึง:

• การตรวจสอบประเภท: ตรวจสอบให้แน่ใจว่า Custom property ได้รับค่าของประเภทที่ถูกต้อง
• แอนิเมชัน: เปิดใช้งานการเปลี่ยนภาพและแอนิเมชันที่ราบรื่นสำหรับ Custom properties ของประเภทเฉพาะ เช่น ตัวเลขหรือสี
• ค่าเริ่มต้น: ให้ค่าสำรองหาก Custom property ไม่ได้กำหนดไว้อย่างชัดเจน
• การควบคุมการสืบทอด: กำหนดว่า Custom property สืบทอดค่าจากองค์ประกอบหลักหรือไม่

คิดว่ามันเป็นการเพิ่มความปลอดภัยของประเภทให้กับตัวแปร CSS ของคุณ ช่วยให้คุณสร้างสไตล์ชีตที่แข็งแกร่งและคาดเดาได้มากขึ้น

ไวยากรณ์ของ @property

กฎ @property เป็นไปตามไวยากรณ์พื้นฐานนี้:

@property --property-name {
  syntax: '';
  inherits: true | false;
  initial-value: ;
}

มาแบ่งแต่ละส่วน:

• --property-name: ชื่อของ Custom property ที่คุณต้องการลงทะเบียน ต้องขึ้นต้นด้วยยัติภังค์สองตัว (--)
• syntax: กำหนดประเภทของค่าที่คาดหวังสำหรับ Property สิ่งนี้สำคัญอย่างยิ่งสำหรับการตรวจสอบประเภทและแอนิเมชัน เราจะสำรวจค่า Syntax ที่มีให้ใช้งานโดยละเอียดด้านล่าง
• inherits: ค่าบูลีนที่ระบุว่า Property ควรจะสืบทอดจากองค์ประกอบหลักหรือไม่ ค่าเริ่มต้นคือ false หากไม่ได้ระบุ
• initial-value: ค่าเริ่มต้นสำหรับ Property หากไม่ได้ตั้งค่าไว้อย่างชัดเจนในองค์ประกอบ สิ่งนี้ทำให้มั่นใจได้ว่าจะมีค่าสำรองเสมอ

ทำความเข้าใจกับ Descriptor syntax

Descriptor syntax เป็นส่วนที่สำคัญที่สุดของกฎ @property มันบอกเบราว์เซอร์ว่าควรคาดหวังค่าประเภทใดสำหรับ Custom property นี่คือค่า Syntax ทั่วไปบางส่วน:

• *: อนุญาตให้ใช้ค่าใดก็ได้ นี่คือ Syntax ที่อนุญาตมากที่สุดและจำลองพฤติกรรมของตัวแปร CSS มาตรฐานโดยไม่ต้องลงทะเบียน ใช้สิ่งนี้แต่น้อย
• <length>: คาดหวังค่าความยาว (เช่น 10px, 2em, 50%) สิ่งนี้เปิดใช้งานแอนิเมชันที่ราบรื่นระหว่างค่าความยาวที่แตกต่างกัน
• <number>: คาดหวังค่าตัวเลข (เช่น 1, 3.14, -5) มีประโยชน์สำหรับการสร้างแอนิเมชันคุณสมบัติทางตัวเลข เช่น ความทึบแสงหรือสเกล
• <percentage>: คาดหวังค่าเปอร์เซ็นต์ (เช่น 25%, 100%)
• <color>: คาดหวังค่าสี (เช่น #f00, rgb(255, 0, 0), hsl(0, 100%, 50%)) เปิดใช้งานการเปลี่ยนสีและแอนิเมชันที่ราบรื่น
• <image>: คาดหวังค่ารูปภาพ (เช่น url(image.jpg), linear-gradient(...))
• <integer>: คาดหวังค่าจำนวนเต็ม (เช่น 1, -10, 0)
• <angle>: คาดหวังค่ามุม (เช่น 45deg, 0.5rad, 200grad) มีประโยชน์สำหรับการสร้างแอนิเมชันการหมุน
• <time>: คาดหวังค่าเวลา (เช่น 1s, 500ms) มีประโยชน์สำหรับการควบคุมระยะเวลาของแอนิเมชันหรือการหน่วงเวลาผ่าน Custom properties
• <resolution>: คาดหวังค่าความละเอียด (เช่น 300dpi, 96dpi)
• <transform-list>: คาดหวังรายการฟังก์ชันการแปลง (เช่น translateX(10px) rotate(45deg)) อนุญาตให้สร้างแอนิเมชันการแปลงที่ซับซ้อน
• <custom-ident>: คาดหวังตัวระบุที่กำหนดเอง (สตริง) คล้ายกับ enum
• <string>: คาดหวังค่าสตริง (เช่น "Hello World") ระมัดระวังสิ่งนี้ เนื่องจากโดยทั่วไปจะไม่รองรับการสร้างแอนิเมชันสตริง
• Custom Syntaxes: คุณสามารถสร้าง Syntaxes ที่ซับซ้อนยิ่งขึ้นได้โดยใช้การรวมกันของข้างต้นและตัวดำเนินการ | (or), `[]` (grouping), `+` (one or more), `*` (zero or more) และ `?` (zero or one) ตัวอย่างเช่น: <length> | <percentage> อนุญาตให้ใช้ค่าความยาวหรือค่าเปอร์เซ็นต์

การเลือก syntax ที่ถูกต้องเป็นสิ่งสำคัญสำหรับการใช้ประโยชน์จากพลังทั้งหมดของ @property

ตัวอย่างการใช้งานจริงของ @property

มาดูตัวอย่างการใช้งานจริงบางส่วนของวิธีใช้ @property ใน CSS ของคุณ

ตัวอย่างที่ 1: การสร้างแอนิเมชันสีพื้นหลัง

สมมติว่าคุณต้องการสร้างแอนิเมชันสีพื้นหลังของปุ่ม คุณสามารถใช้ @property เพื่อลงทะเบียน Custom property สำหรับสีพื้นหลัง จากนั้นสร้างแอนิเมชันโดยใช้ CSS Transitions

@property --bg-color {
  syntax: '<color>';
  inherits: false;
  initial-value: #fff;
}

.button {
  background-color: var(--bg-color);
  transition: --bg-color 0.3s ease;
}

.button:hover {
  --bg-color: #f00; /* Red */
}

ในตัวอย่างนี้ เราลงทะเบียน Custom property --bg-color ด้วย Syntax <color> ซึ่งหมายความว่าจะคาดหวังค่าสี initial-value ถูกตั้งค่าเป็นสีขาว (#fff) เมื่อมีการโฮเวอร์ปุ่ม --bg-color จะเปลี่ยนเป็นสีแดง (#f00) และ Transition จะสร้างแอนิเมชันการเปลี่ยนสีพื้นหลังอย่างราบรื่น

ตัวอย่างที่ 2: การควบคุมรัศมีของเส้นขอบด้วยตัวเลข

คุณสามารถใช้ @property เพื่อควบคุมรัศมีของเส้นขอบขององค์ประกอบและสร้างแอนิเมชันได้

@property --border-radius {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.rounded-box {
  border-radius: var(--border-radius);
  transition: --border-radius 0.5s ease;
}

.rounded-box:hover {
  --border-radius: 20px;
}

ที่นี่ เราลงทะเบียน --border-radius เป็น <length> ทำให้มั่นใจได้ว่าจะยอมรับค่าความยาว เช่น px, em หรือ % ค่าเริ่มต้นคือ 0px เมื่อโฮเวอร์เหนือ .rounded-box รัศมีของเส้นขอบจะเคลื่อนที่เป็นแอนิเมชันไปที่ 20px

ตัวอย่างที่ 3: การสร้างแอนิเมชัน Shadow Offset

สมมติว่าคุณต้องการสร้างแอนิเมชัน Horizontal Offset ของ Box Shadow

@property --shadow-offset-x {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

.shadowed-box {
  box-shadow: var(--shadow-offset-x) 5px 10px rgba(0, 0, 0, 0.5);
  transition: --shadow-offset-x 0.3s ease;
}

.shadowed-box:hover {
  --shadow-offset-x: 10px;
}

ในกรณีนี้ --shadow-offset-x ถูกลงทะเบียนเป็น <length> และค่าเริ่มต้นคือ 0px Property box-shadow ใช้ Custom property นี้สำหรับ Horizontal Offset เมื่อโฮเวอร์ Offset จะเคลื่อนที่เป็นแอนิเมชันไปที่ 10px

ตัวอย่างที่ 4: การใช้ <custom-ident> สำหรับ Theming

Syntax <custom-ident> ช่วยให้คุณกำหนดชุดค่าสตริงที่กำหนดไว้ล่วงหน้า ซึ่งเป็นการสร้าง Enum สำหรับตัวแปร CSS ของคุณ สิ่งนี้มีประโยชน์สำหรับการ Theming หรือการควบคุมสถานะที่แตกต่างกัน

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light; /* Default Theme */
}

body {
  background-color: var(--theme) == light ? #fff : #333;
  color: var(--theme) == light ? #000 : #fff;
}

.dark-theme {
  --theme: dark;
}

ที่นี่ --theme ถูกลงทะเบียนด้วย Syntax <custom-ident> ในขณะที่เราไม่ได้แสดงรายการตัวระบุที่อนุญาตไว้อย่างชัดเจนในกฎ @property โค้ดบ่งบอกว่าตัวระบุเหล่านั้นคือ `light` และ `dark` จากนั้น CSS จะใช้ตรรกะแบบมีเงื่อนไข (var(--theme) == light ? ... : ...) เพื่อใช้สไตล์ที่แตกต่างกันตาม Theme ปัจจุบัน การเพิ่มคลาส `dark-theme` ให้กับองค์ประกอบจะสลับ Theme เป็น Dark โปรดทราบว่าตรรกะแบบมีเงื่อนไขโดยใช้ `var()` ไม่ใช่ CSS มาตรฐานและมักจะต้องใช้ Preprocessors หรือ JavaScript วิธีการที่เป็นมาตรฐานมากกว่าคือการใช้คลาส CSS และ Cascading:

@property --theme {
  syntax: '<custom-ident>';
  inherits: true;
  initial-value: light;
}

:root {
  --theme: light;
}

body {
  background-color: #fff;
  color: #000;
}

body[data-theme="dark"] {
  background-color: #333;
  color: #fff;
}

/* JavaScript to toggle the theme */
/* document.body.setAttribute('data-theme', 'dark'); */

ในตัวอย่างที่แก้ไขนี้ เราใช้แอตทริบิวต์ data-theme บนองค์ประกอบ body เพื่อควบคุม Theme JavaScript (แสดงความคิดเห็น) จะใช้เพื่อสลับแอตทริบิวต์ระหว่าง `light` และ `dark` นี่เป็นวิธีการที่แข็งแกร่งและเป็นมาตรฐานมากกว่าสำหรับการ Theming ด้วยตัวแปร CSS

ประโยชน์ของการใช้ @property

การใช้ @property มีข้อดีหลายประการ:

• ปรับปรุงความสามารถในการอ่านและการบำรุงรักษาโค้ด: โดยการกำหนดประเภทของค่าที่คาดหวังสำหรับ Custom property อย่างชัดเจน คุณทำให้โค้ดของคุณเข้าใจง่ายขึ้นและมีโอกาสเกิดข้อผิดพลาดน้อยลง
• ความสามารถในการสร้างแอนิเมชันที่ได้รับการปรับปรุง: @property เปิดใช้งานการเปลี่ยนภาพและแอนิเมชันที่ราบรื่นสำหรับ Custom properties เปิดโอกาสใหม่ๆ สำหรับการสร้างอินเทอร์เฟซผู้ใช้แบบไดนามิกและน่าสนใจ
• ประสิทธิภาพที่ดีขึ้น: เบราว์เซอร์สามารถปรับปรุงการเรนเดอร์องค์ประกอบโดยใช้ Custom properties ที่ลงทะเบียนไว้ ซึ่งนำไปสู่ประสิทธิภาพที่ดีขึ้น
• ความปลอดภัยของประเภท: เบราว์เซอร์ตรวจสอบว่าค่าที่กำหนดตรงกับ Syntax ที่ประกาศไว้หรือไม่ ป้องกันพฤติกรรมที่ไม่คาดคิดและทำให้การดีบักง่ายขึ้น สิ่งนี้มีประโยชน์อย่างยิ่งในโครงการขนาดใหญ่ที่มีนักพัฒนาจำนวนมากมีส่วนร่วมใน Codebase
• ค่าเริ่มต้น: การตรวจสอบให้แน่ใจว่า Custom property มีค่าที่ถูกต้องเสมอ แม้ว่าจะไม่ได้ตั้งค่าไว้อย่างชัดเจน ป้องกันข้อผิดพลาดและปรับปรุงความแข็งแกร่งของ CSS ของคุณ

ความเข้ากันได้ของเบราว์เซอร์

ณ สิ้นปี 2023 @property มีการรองรับเบราว์เซอร์ที่ดี แต่ไม่ครอบคลุมทั้งหมด ได้รับการสนับสนุนในเบราว์เซอร์สมัยใหม่ส่วนใหญ่ รวมถึง Chrome, Firefox, Safari และ Edge อย่างไรก็ตาม เบราว์เซอร์รุ่นเก่าอาจไม่รองรับ ตรวจสอบข้อมูลความเข้ากันได้ของเบราว์เซอร์ล่าสุดเสมอในเว็บไซต์เช่น Can I use... ก่อนที่จะใช้ @property ใน Production

ในการจัดการเบราว์เซอร์รุ่นเก่า คุณสามารถใช้ Feature Queries (@supports) เพื่อให้สไตล์สำรอง:

@supports (--property: value) {
  /* Styles that use @property */
}

@supports not (--property: value) {
  /* Fallback styles for browsers that don't support @property */
}

แทนที่ --property และ value ด้วย Custom property จริงและค่าของมัน

ควรใช้ @property เมื่อใด

พิจารณาใช้ @property ในสถานการณ์ต่อไปนี้:

• เมื่อคุณต้องการสร้างแอนิเมชัน Custom properties: นี่คือกรณีการใช้งานหลักสำหรับ @property การลงทะเบียน Property ด้วย Syntax ที่ถูกต้องจะเปิดใช้งานแอนิเมชันที่ราบรื่น
• เมื่อคุณต้องการบังคับใช้ความปลอดภัยของประเภทสำหรับ Custom properties: หากคุณต้องการให้แน่ใจว่า Custom property มีค่าของประเภทเฉพาะเสมอ ให้ใช้ @property เพื่อลงทะเบียน
• เมื่อคุณต้องการให้ค่าเริ่มต้นสำหรับ Custom property: Descriptor initial-value ช่วยให้คุณระบุค่าสำรองได้
• ในโครงการขนาดใหญ่: @property ปรับปรุงความสามารถในการบำรุงรักษาโค้ดและป้องกันข้อผิดพลาด ทำให้เป็นประโยชน์อย่างยิ่งสำหรับโครงการขนาดใหญ่ที่มีนักพัฒนาจำนวนมาก
• เมื่อสร้าง Components ที่นำกลับมาใช้ใหม่ได้หรือ Design Systems: @property สามารถช่วยให้มั่นใจได้ถึงความสอดคล้องและความสามารถในการคาดการณ์ทั่วทั้ง Components ของคุณ

ข้อผิดพลาดทั่วไปที่ควรหลีกเลี่ยง

• ลืม Descriptor syntax: หากไม่มี Descriptor syntax เบราว์เซอร์จะไม่ทราบประเภทของค่าที่คาดหวัง และแอนิเมชันจะไม่ทำงานอย่างถูกต้อง
• การใช้ค่า syntax ที่ไม่ถูกต้อง: การเลือก Syntax ที่ไม่ถูกต้องอาจนำไปสู่พฤติกรรมที่ไม่คาดคิด ตรวจสอบให้แน่ใจว่าได้เลือก Syntax ที่สะท้อนถึงประเภทของค่าที่คาดหวังอย่างแม่นยำ
• ไม่ได้ให้ initial-value: หากไม่มีค่าเริ่มต้น Custom property อาจไม่ได้กำหนดไว้ ซึ่งนำไปสู่ข้อผิดพลาด ให้ค่าเริ่มต้นที่สมเหตุสมผลเสมอ
• การใช้ * เป็น Syntax มากเกินไป: แม้ว่าจะสะดวก แต่การใช้ * จะลบล้างประโยชน์ของการตรวจสอบประเภทและแอนิเมชัน ใช้เฉพาะเมื่อคุณต้องการอนุญาตให้ใช้ค่าประเภทใดก็ได้
• ละเลยความเข้ากันได้ของเบราว์เซอร์: ตรวจสอบความเข้ากันได้ของเบราว์เซอร์เสมอและให้สไตล์สำรองสำหรับเบราว์เซอร์รุ่นเก่า

@property และ CSS Houdini

@property เป็นส่วนหนึ่งของชุด APIs ที่ใหญ่กว่าที่เรียกว่า CSS Houdini Houdini ช่วยให้นักพัฒนาสามารถเข้าถึงเอ็นจิ้นการเรนเดอร์ของเบราว์เซอร์ ทำให้พวกเขาสามารถควบคุมกระบวนการจัดรูปแบบและเลย์เอาต์ได้อย่างที่ไม่เคยมีมาก่อน Houdini APIs อื่นๆ ได้แก่:

• Paint API: ช่วยให้คุณกำหนดรูปภาพพื้นหลังและเส้นขอบที่กำหนดเองได้
• Animation Worklet API: ให้วิธีสร้างแอนิเมชันประสิทธิภาพสูงที่ทำงานโดยตรงในเธรด Compositor ของเบราว์เซอร์
• Layout API: ช่วยให้คุณกำหนดอัลกอริธึมเลย์เอาต์ที่กำหนดเองได้
• Parser API: ให้การเข้าถึง CSS Parser ของเบราว์เซอร์

@property เป็น Houdini API ที่ค่อนข้างง่ายในการเรียนรู้ แต่เปิดประตูสู่การสำรวจคุณสมบัติ Houdini ขั้นสูงเพิ่มเติม

สรุป

@property เป็น CSS at-rule อันทรงพลังที่ปลดล็อกความสามารถขั้นสูงสำหรับ Custom properties โดยการลงทะเบียน Custom properties กับเบราว์เซอร์ คุณสามารถบังคับใช้ความปลอดภัยของประเภท เปิดใช้งานแอนิเมชันที่ราบรื่น และปรับปรุงความแข็งแกร่งโดยรวมของโค้ด CSS ของคุณ แม้ว่าการรองรับเบราว์เซอร์จะไม่ครอบคลุมทั้งหมด แต่ประโยชน์ของการใช้ @property โดยเฉพาะอย่างยิ่งในโครงการขนาดใหญ่และ Design Systems ทำให้เป็นเครื่องมือที่มีค่าสำหรับการพัฒนาเว็บสมัยใหม่ ยอมรับ @property และยกระดับทักษะ CSS ของคุณไปอีกขั้น!